 body {
    height:1200px;
    /* 防止页面缩放 */
    overflow-x: hidden; /* 禁止水平滚动 */
    overflow-y: auto; /* 允许垂直滚动 */
    font-family: Arial, sans-serif;
    background-color: #100c2a;
}
.top-header {
    width: 100%;
    height: auto;
    /* 其他样式 */
}
/* CSS */
h1 {
    text-align: center;
    color: #fff;
    margin: 0;
    position: absolute; /* 使用绝对定位，以便于它们之间的相互位置调整 */
    left: 50%; /* 设置left属性为50%，使元素居中 */
    top: 10px; /* 根据需要调整top属性，使元素位于页面的顶部 */
    transform: translateX(-50%); /* 通过transform属性调整元素位置 */
}

.chart-map, .chart-bar, .chart-line, .chart-pie {
    border: 2px solid #fff; /* 保持边框颜色 */
    border-radius: 18px; /* 添加边框半径，使边框更加圆滑 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影，增加立体感 */
    position: absolute; /* 使用绝对定位，以便于它们之间的相互位置调整 */
    padding: 10px; /* 添加内边距，增加内部空间 */
    overflow: hidden; /* 防止内容溢出 */
}
.chart-map {
    border: 2px white solid;
    position: relative; /* 确保 .chart-pie 相对于 .chart-map 进行定位 */
    display: flex;
    justify-content: center;
    top: 20px; /* 调整顶部位置，避免与标题重叠 */
    left: 460px; /* 左侧与 .chart-pie 对齐 */
    width: 600px;
    height: 400px;
}

.chart-pie {
    border: 2px white solid;
    position: absolute;
    top: 140px; /* 向上移动20像素 */
    left: 30px; /* 左侧与 .chart-map 对齐 */
    height: 400px
}

.image-title {
    color: white; /* 文本颜色 */
    text-align: center; /* 文本居中 */
    font-size: 1.5em; /* 文本字体大小 */
    font-weight: bold; /* 文本加粗 */
}

.date-component {
    text-align: center; /* 日期居中显示 */

    color: white; /* 日期颜色 */
    margin-bottom: 20px; /* 日期组件与上方图表的间距 */

}

#current-date {
    font-family: Arial, sans-serif; /* 日期和时间字体 */
    font-size: 1.2em; /* 日期和时间字体大小 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加文字阴影*/
}


